<template>
  <yy-paging
    v-model="dataList"
    @query="queryList"
    ref="paging"
    :auto="false"
    @scroll="scroll"
    :refresher-enabled="false"
  >
    <template #top>
      <u-navbar
        :is-back="false"
        :background="{ backgroundColor: isScroll ? '#F2F5F7' : 'transparent' }"
        :border-bottom="false"
        :custom-style="{ transition: 'background-color 0.3s ease-in-out' }"
      >
        <view class="grid grid-cols-3 items-center px-3 w-full">
          <view class="flex col-span-1 items-center" @click="vk.navigateBack()">
            <image src="/static/dddr128.png" mode="aspectFill" class="size-6" />
          </view>
          <view class="line-clamp-1 flex col-span-1 justify-center">
            <view class="text-[#000] font-bold text-base"> 昵称 </view>
          </view>
          <view class="flex col-span-1 justify-end">
            <view
              class="w-[4.25rem] h-[1.75rem] bg-[#00A9AB] rounded-full flex justify-center items-center btn"
              @click="complete"
            >
              <view class="text-[.875rem] text-[#FFFFFF]"> 完成 </view>
            </view>
          </view>
        </view>
      </u-navbar>
    </template>
    <template #empty>
      <yy-empty></yy-empty>
    </template>
    <template #loadingMoreNoMore>
      <yy-nomore></yy-nomore>
    </template>
    <view class="flex flex-col gap-2 p-4">
      <view class="text-[.8125rem] text-[#8E9299]">本月还可修改 {{ data.limit }} 次 </view>
      <view class="w-full h-[2.5rem] bg-[#FFFFFF] rounded-[.5rem] px-3 flex items-center">
        <input
          type="text"
          placeholder="请输入昵称"
          focus
          :maxlength="maxlength"
          v-model="nickname"
          class="flex-1 h-full"
        />
        <view class="flex w-[3.4375rem] justify-between items-center">
          <view class="flex items-center">
            <image src="/static/dddr42.png" v-if="nickname" class="size-4" mode="aspectFill" @click="nickname = ''" />
          </view>
          <view class="text-[.6875rem] text-[#8E9299]"> {{ nickname.length }}/{{ maxlength }} </view>
        </view>
      </view>
      <view class="flex flex-col gap-1 mt-3">
        <u-parse :html="content" class="text-[.6875rem] text-[#8E9299]"></u-parse>
      </view>
    </view>
  </yy-paging>
</template>

<script>
  export default {
    data() {
      return {
        isScroll: false, // 是否滚动
        dataList: [], // 数据列表
        automatic: false, // 是否自动加载
        nickname: '', // 用户昵称
        maxlength: 20, // 昵称最大长度
        data: {}, // 昵称相关数据
        content: '' // 昵称相关内容
      }
    },
    onLoad(e) {
      this.nickname = e.nickname
      this.getNicknameCount()
    },
    methods: {
      scroll(e) {
        this.isScroll = e.detail.scrollTop > 0
      },
      async complete() {
        vk.pubfn.debounce(async () => {
          if (!this.nickname) return vk.toast('请输入昵称', 'none')
          let res = await api.editNickname({ nickname: this.nickname })
          vk.toast(res.msg)
          if (!res.code) return
          vk.toast(res.msg, 300, e => {
            vk.vuex.dispatch('$user/getUserInfo')
            vk.navigateBack()
          })
        }, 500)
      },

      async queryList(page, limit) {
        this.$refs.paging.complete([1, 1, 1])
      },
      async getNicknameCount() {
        let res = await api.getNicknameCount()
        this.data = res.data
        this.content = res.data.rules.replace(/\n/g, '<br />')
      }
    }
  }
</script>

<style lang="scss" scoped></style>
